<style>
.g-header-bg{
	position: relative;
	width: 100%;
    padding-top: var(--status-bar-height);
	z-index: 1;
}
.m-header{
	position: relative;
	width: 670upx;
	margin: 0 auto;
}
.m-header-view{
	width: 33%;
	float: left;
	text-align: center;
	color: #fff;
}
.m-header-view image{
	width: 39upx;
	height: 39upx;
}
.m-header-view:last-child,.u-header-bill{
	float: right;
}
.u-header-bg {
    width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	height: 668rpx;
}
.u-title{
	height: 100rpx;
	text-align: center;
	font-size: 38upx;
	color: #fff;
	line-height: 100rpx;
	font-family: 'PingFang SC Medium';
}
.u-total{
	font-size: 60upx;
	text-align: center;
	font-family: 'Adobe Heiti Std';
	background: linear-gradient(to bottom, #fff 40%, #4dc617);
    -webkit-background-clip: text;
    color: transparent;
	font-weight: bold;
}
.m-total-info{
	width: 100%;
	overflow: hidden;
	display:  flex;
	justify-content: center;
	margin-top: 30rpx;
}
.m-total-view{
	text-align: center;
	color: #fff;
	flex: 1;
}
.u-total-type{
	font-size: 40upx;
}
.u-total-type-title{
	font-size: 28upx;
	margin-top: 10upx;
}
.g-content{
	background: #f8f8f8;
	width: 100%;
}
.m-content-list-box{
	height: 145upx;
	background: #fff;
	width: 100%;
	border-radius: 20upx;
	position: relative;
	margin-bottom: 14upx;
	box-shadow: 10px 0px 0px 5px #f0f0f0;
	display: flex;
	align-items: center;
}
.u-content-icon{
	width: 61upx;
	height: 61upx;
	overflow: hidden;
	margin: 0 35upx;
}
.u-content-icon image{
	width: 100%;
	height: 100%;
}
.u-content-info-title{
	font-size: 30upx;
}
.u-content-info-total{
	font-size: 40upx;
	color: #515151;
	font-family: 'Adobe Heiti Std';
}
.g-header-btn {
    display: inline-block;
    margin-left: 60upx;
}
/* 重置折叠版 */
.uni-collapse-cell--open,.uni-collapse-cell--hover{
	background: #ffffff;
}
.uni-collapse-cell__title{
	padding: 0;
	height: 145upx;
	width: 100%;
	border-radius: 20upx;
	margin-bottom: 14upx;
	box-shadow: 10px 0px 0px 5px #f0f0f0;
}
.uni-collapse-cell__title-text{
	font-size: 30upx;
}
.uni-collapse-cell__title-extra{
	margin:0 35upx ;
}
.uni-collapse-cell__title-extra image{
	width: 61upx;
	height: 61upx;
}
.uni-collapse-cell__title-arrow{
	margin-right: 30upx;
}
.tenday-content{
	overflow: hidden;
	height: 460px;
	transition: all .3s;
}
.tenday-content .tenday-title{
	display: flex;
	align-items: center;
	padding: 20upx 0;
	height: 40upx;
}
.tenday-content .tenday-title text{
	color: #1a1a1a;
}
.tenday-content .item{
	display: flex;
	align-items: center;
	padding: 10px 0;
	height: 20px;
}
.tenday-content .item:nth-child(2n){
	background: #f7f7f7;
}
.tenday-content text{
	font-size: 32upx;
	text-align: center;
	color: #828080;
}
.tenday-content .loading-text{
	text-align: center;
	font-size: 32upx;
	padding: 10upx 0;
}
.tenday-content text.w1{
	width: 30%;
}
.tenday-content text.w2{
	width: 15%;
}
.tenday-content text.w3{
	width: 40%;
}
.tenday-content text.w4{
	width: 15%;
}
.price-function{
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border-radius: 10upx 10upx 0 0;
	padding: 40upx 0;
	position: relative;
	top: 0;
	z-index: 2;
	margin-bottom: 10rpx;
}
.price-function .item{
	flex: 1;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36upx;
}
.price-function .icon{
	width: 82upx;
	height: 82upx;
	display: block;
	margin-right: 20upx;
}
.furturn-cont{
	background: #FFFFFF;
}
.furturn-cont .m-content-info{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 78%;
}
</style>
<template>
	<view class="page">
		<view class="g-header-bg">
			<view class="m-header">
				<view class="m-header-view" @tap="back">
					<arrow size="50" color="#fff" direction="left"></arrow>
				</view>
				<view class="m-header-view">{{title[type]}}</view>
				<view class="m-header-view"></view>
			</view>
			<view class="u-title">{{title[type]}}总汇</view>
			<view class="u-total">{{userInfo.total}}</view>
			<view class="m-total-info">
				<navigator open-type="navigate" class="m-total-view" url="/pages/common/bill?type=1">
					<view class="u-total-type">{{userInfo.money}}</view>
					<view class="u-total-type-title">可用{{title[type]}}</view>
				</navigator>
				<navigator open-type="navigate" class="m-total-view" url="/pages/common/bill?type=0">
					<view class="u-total-type">{{userInfo.frozen_money}}</view>
					<view class="u-total-type-title">备用{{title[type]}}</view>
				</navigator>
				<view v-if="userInfo.ydt_profit" class="m-total-view">
					<view class="u-total-type">{{userInfo.ydt_profit}}</view>
					<view class="u-total-type-title">剩余奖励</view>
				</view>
				<view v-if="userInfo.ydt_principal" class="m-total-view">
					<view class="u-total-type">{{userInfo.ydt_principal}}</view>
					<view class="u-total-type-title">本金</view>
				</view>
			</view>
			<view class="m-total-info-s m-total-info">
				<view class="m-total-view">
					<view class="u-total-type">{{thigh.transaction_price||0}}</view>
					<view class="u-total-type-title">今日股价</view>
				</view>
				<view class="m-total-view">
					<view class="u-total-type">{{thigh.last_quota||0}}</view>
					<view class="u-total-type-title">昨日配股</view>
				</view>
				<view class="m-total-view">
					<view class="u-total-type">{{thigh.quota||0}}</view>
					<view class="u-total-type-title">今日配股</view>
				</view>
				<view class="m-total-view">
					<view class="u-total-type">{{thigh.estimated_value||0}}</view>
					<view class="u-total-type-title">预股值</view>
				</view>
			</view>
			<image class="u-header-bg" src="../../static/images/ydt/confluence-bg.png"></image>
			<view style="width: 100%; height: 30rpx;"></view>
		</view>
        
		<view class="g-content">
			<view class="price-function">
				<navigator open-type="navigate" :url="'/pages/user/hl_takecash?state=0&pageType=takecash'" class="item" v-if="price_function.can_widthdraw">
					<image class="icon" src="../../static/icons/ydt/confluence-withdraw.png"></image><text>退取</text>
				</navigator>
				<!-- <navigator open-type="navigate" url="/pages/user/hl_transform?state=0" class="item" v-if="price_function.can_change">
					<image class="icon" src="../../static/icons/ydt/confluence-bill.png"></image><text>互转</text>
				</navigator> -->
			</view>
			
			<view class="m-content-list-box">
				<view class="u-content-icon">
					<image src="../../static/icons/ydt/money-new.png"></image>
				</view>
				<view class="m-content-info">
					<view class="u-content-info-title">拼团粮仓</view>
					<view class="u-content-info-total">{{userInfo.new_money}}</view>
				</view>
			</view>
			<view class="m-content-list-box">
				<view class="u-content-icon">
					<image src="../../static/icons/pawn_money.png"></image>
				</view>
				<view class="m-content-info">
					<view class="u-content-info-title">典当粮仓</view>
					<view class="u-content-info-total">{{userInfo.pawn_money}}</view>
				</view>
			</view>
			<view class="furturn-cont">
				<view class="m-content-list-box" @tap="toggle">
					<view class="u-content-icon">
						<image src="../../static/icons/ydt/furturn.png"></image>
					</view>
					<view class="m-content-info">
						<view class="u-content-info-title"><!-- 未来10天 -->备用转可用情况</view>
						<arrow color="#D71311" size="40" :direction="direction?'top':'bottom'"></arrow>
					</view>
				</view>
				<view class="tenday-content" :style="{height:direction==='true' || direction=== true ? '460px' : '0px'}">
					<view class="tenday-title">
						<text class="w1">日期</text>
						<text class="w2">拼团数</text>
						<text class="w3">当天转入</text>
						<text class="w4">查看</text>
					</view>
					<view v-if="futureList">
						<view class="item" @tap="deital(item.num,item.end_time)"  v-for="(item,index) in futureList" :key="index">
							<text class="w1">{{item.end_time}}</text>
							<text class="w2">{{item.num}}</text>
							<text class="w3">{{item.frozen_money}}</text>
							<text class="w4">明细</text>
						</view>
					</view>
					<view class="loading-text" v-else>加载中...</view>
				</view>
			</view>
			<view class="m-content-list-box">
				<view class="u-content-icon">
					<image src="../../static/icons/ydt/money-today.png"></image>
				</view>
				<view class="m-content-info">
					<view class="u-content-info-title">今日可退</view>
					<view class="u-content-info-total">{{userInfo.today_frozen}}</view>
				</view>
			</view>
			<view class="m-content-list-box">
				<view class="u-content-icon">
					<image src="../../static/icons/ydt/money-torrow.png"></image>
				</view>
				<view class="m-content-info">
					<view class="u-content-info-title">明日待退</view>
					<view class="u-content-info-total">{{userInfo.tomorrow_frozen}}</view>
				</view>
			</view>
			<view class="m-content-list-box">
				<view class="u-content-icon">
					<image src="../../static/icons/ydt/money-shou.png"></image>
				</view>
				<view class="m-content-info">
					<view class="u-content-info-title">可收米</view>
					<view class="u-content-info-total">{{userInfo.withdraw}}</view>
				</view>
			</view>
		</view>
		<view class="m-full-loading" v-if="showLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import henglang from '@/common/common.js';
	export default {
		data() {
			return {
				title: ['粮仓','蝌蚪','积分'],
                type: 0,
                userInfo: {},
				price_function:{},
				futureList:[],
				showLoading: false,
				isGoodsTpye: henglang.isGoodsTpye(),
				isOpen: false,
				direction: true,
				thigh:{}
			};
		},
        methods: {
            back() {
                uni.navigateBack();
            },
			deital(num,end_time) {
				if(num){
					uni.navigateTo({
						url:'/pages/user/future_deital?end_time=' + end_time
					})
				}else{
					henglang.showToast('暂无明细',1000)
				}
			},
			toggle() {
				this.direction = !this.direction
			}
        },
        onLoad({type}) {
			let that = this
            that.type = type;
			that.showLoading = true;
			henglang.get('member/getFutureOrderList',{},true,function(res){
				that.showLoading = false;
				if(res.data.code == 0){
					that.futureList = res.data.data;
					that.thigh = res.data.thigh
				}else{
					henglang.showToast(res.data.msg)
				}
			})
        },
        onReady() {
            this.userInfo = uni.getStorageSync('userInfo');
			this.userInfo.total = henglang.mathFormat(this.userInfo.money + this.userInfo.frozen_money,2);
			this.price_function = uni.getStorageSync('price_function');
        }
	}
</script>


